<script setup>
import { onMounted, ref, watch, reactive } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import { ArrowDownBold, CloseBold } from '@element-plus/icons-vue'


const router = useRouter()
// const menu = [
//   { name: "Blockchain", submenu: [{ name: "Veiw Txns", hash: "/txs", label: 'txs' }, { name: "Blocks", hash: '/blocks', label: 'blocks' }] },
//   { name: "Tokens", submenu: [{ name: "View ERC20 Transfers ", hash: '/tokentxns' }] },
//   { name: "Resources", submenu: [{ name: "Resources", hash: '/' }] },
//   { name: "More", submenu: [{ name: "More", hash: '/' }] },
// ]
const menu = reactive([
  { name: "Blockchain", submenu: [{ name: "Veiw Txns", hash: "/txs", label: 'txs' }, { name: "Blocks", hash: '/blocks', label: 'blocks' }], active: false },
  { name: "Tokens", submenu: [{ name: "View ERC20 Transfers ", hash: '/tokentxns', label: 'tokentxns' }], active: false },
  { name: "Resources", submenu: [{ name: "Resources", hash: '/' }], active: false },
  { name: "More", submenu: [{ name: "More", hash: '/' }], active: false },
])

const drawer = ref(false)
const pathName = ref('')

onMounted(() => {
  // console.log(router.currentRoute.value.name)
  // pathName.value = router.currentRoute.value.name
})

const onMenu = () => {
  drawer.value = !drawer.value
}

// const preventDefaultIfNeeded = (event) => {
//   event.preventDefault();
// }

watch(() => router.currentRoute.value.name, (newPath, oldPath) => {
  // alert(newPath)
  menu.forEach((item, idx) => {
    menu[idx] = { ...menu[idx], ...{ active: false } };
    item.submenu.forEach((itemsub) => {
      if (itemsub.label == newPath) {
        menu[idx] = { ...menu[idx], ...{ active: true } };
      }
    })
  })

  pathName.value = newPath || 'home';
  console.log('路由已变更：', oldPath, '->', newPath);
  window.scrollTo({ top: 0 });
});

function updateItem(index) {
  // menu.forEach((item, idx) => {
  //   console.log(idx, index)
  //   if (idx < 2) {
  //     menu[idx] = { ...menu[idx], ...{ active: (idx == index ? true : false) } };
  //   }
  // })
  drawer.value = false;
}


</script>

<template>
  <header>
    <!-- 主题切换 -->
    <!-- <ThemeView /> -->
    <div class="container">
      <div class="logo">
        <RouterLink to="/"><img src="../assets/img/logo.svg" alt="logo" /></RouterLink>
      </div>
      <nav class="web">
        <ul>
          <li>
            <RouterLink to="/" exact-active-class="active">Home</RouterLink>
          </li>
          <li v-for="(item, i) in menu" :key="i">
            <div class="li_box">
              <div :class="item.active && 'active'">{{ item.name }}</div>
              <el-icon :class="item.active && 'active'">
                <ArrowDownBold />
              </el-icon>
              <div class="sub_nav">
                <p v-for="(items, x) in item.submenu" :key="x">
                  <RouterLink @click="updateItem(i, { active: true })" :class="(pathName == items.label) ? 'active' : ''"
                    :to="{ path: items.hash }">{{ items.name
                    }}</RouterLink>
                </p>
              </div>
            </div>
          </li>

        </ul>
      </nav>

      <div @click="onMenu" class="menu_xs phone">
        <img v-if="!drawer" src="../assets/img/menu.png" alt="" srcset="">
        <el-icon v-else size="24px">
          <CloseBold />
        </el-icon>
      </div>

      <el-drawer v-model="drawer" title="TOK" direction="rtl" size="100%" :with-header="false" modal-class="drawer_box">
        <ul>
          <li>
            <h3>
              <RouterLink to="/" @click="drawer = false" exact-active-class="active">Home</RouterLink>
            </h3>
          </li>
          <li v-for="(item, i) in  menu " :key="i">
            <div class="li_box">
              <h3 :class="item.active && 'active'">{{ item.name }}</h3>
              <div class="sub_nav">
                <p v-for="( items, x ) in item.submenu " :key="x">
                  <span><router-link :class="(pathName == items.label) ? 'active' : ''"
                      @click="updateItem(i, { active: true })" :to="{ path: items.hash }">{{
                        items.name
                      }}</router-link> </span>
                </p>
              </div>
            </div>
          </li>
        </ul>
      </el-drawer>
    </div>
  </header>
  <div style="height:64px" class="phone"></div>
</template>

<style scoped lang="less" >
:deep(.el-overlay) {
  top: 64px !important;
}

header {
  line-height: 1.5;
  height: var(--hedaer-height);
  border-bottom: 1px solid var(--color-border);
  height: 64px;

  a {
    color: var(--color-text);
  }

  a.active,
  .active {
    color: var(--primary-color) !important;
  }

  img {
    height: 26px;
  }

  .menu_xs img {
    height: 16px;
  }

  .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }
}

nav {
  ul {
    display: flex;

    li {
      padding: 0 20px;
      height: var(--hedaer-height);
      line-height: var(--hedaer-height);

      p,
      a {
        &:hover {
          color: var(--primary-color);
        }
      }

      a {
        font-family: var(--font-medium);

        span {
          display: block;
        }

      }

      .li_box {
        font-family: var(--font-medium);
        letter-spacing: 1px;
        display: flex;
        align-items: center;

        .img {
          width: 30px;
          margin: 5px 0;
        }

        i {
          padding-left: 5px;
          padding-bottom: 3px;
          font-size: 16px;
        }

        position: relative;
        cursor: pointer;
        color: #202632;

        .sub_nav {
          overflow: hidden;
          transition: .5s;
          padding: 15px 0 10px;
          border-radius: 0 0 10px 10px;
          z-index: -10;
          width: 210px;
          border: 1px solid var(--color-border);
          border-top: 3px solid var(--primary-color);
          background: #fff;
          position: absolute;
          left: 0;
          top: 100%;
          opacity: 0;

          p {
            padding: 0 20px;
            line-height: 30px;

            a {
              font-size: 0.85rem;
              padding: 0 10px;
              border-radius: 6px;
              display: block;
              color: #202632;

              &:hover {
                background: #eee;

              }
            }

            .blue {
              color: var(--primary-color);
            }
          }
        }

        &:hover {
          color: var(--primary-color);

          .sub_nav {
            display: block;
            top: 100%;
            opacity: 1;
            z-index: 10;
          }
        }
      }

      .li_boximg {
        .sub_nav {
          left: -100px;
        }
      }

    }
  }
}

.drawer_box ul li {
  border-bottom: 1px solid var(--color-border);
  padding: 15px 0;

  .li_box {
    h3 {
      margin-bottom: 10px;
      color: var(--color-text);
    }


    span {
      a {
        border-radius: 6px;
        line-height: 30px;
        color: #555;
        margin: 5px;
        background: #f3f3f3;
        display: inline-block;
        padding: 3px 20px;
      }
    }
  }
}

@media (max-width:1000px) {
  header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
    z-index: 1000;
  }
}
</style>
